<template>
  <div class="home industry" style="position: fixed;top: 0;z-index: 100;width: 100%;">
    <van-search class="searchinde" v-model="searchvalue" show-action placeholder="请输入搜索关键词" @search="onSearch"
      @cancel="onCancel" v-show="searchshow" />
    <div class="navheaders" v-show="!searchshow">
      <van-nav-bar @click-left="back" @click-right="Resume">
        <template #left>
          <van-icon name="arrow-left" color="#fff" size="0.6rem" />
        </template>
        <template #title>
          <span>
            <img src="../../assets/img/logo.png" />
          </span>
        </template>
        <template #right>
          <span class="industryzwlbzxgd">保存</span>
        </template>
      </van-nav-bar>
    </div>
    <div class="industryheabha" v-show="!searchshow">
      <!-- <div>
        <van-search
          v-model="search"
          readonly
          input-align="center"
          @click="searchshow=!searchshow"
          class="searchinde"
          placeholder="请输入搜索关键词"
        />
      </div>-->
      <p style="margin-left: 0.2rem;
    font-size: 0.3rem;
    margin-bottom: 0.2rem;
    color: #969799">
        <span>已选</span>
        <span>({{counttree.length}}/{{coun==1?1:3}})</span>
      </p>
      <div class="industryheabhachi">
        <a href="javascript:;" class="industryheabhachichild" v-for="(item,index) in counttree" :key="index+'tree'">
          {{item.text}}
          <span>
            <van-icon name="cross" @click="denic(index,item.code)" />
          </span>
        </a>
      </div>
    </div>
    <div style="text-align: left;
    margin: 0 0.26rem;height: 14rem;overflow-y: scroll;" v-show="!searchshow">
      <div v-for="(item,index) in list" :key="index+'jc'"
        :style="{height:'1rem',lineHeight: '1rem',color: 'rgba(34,34,34,1)'}" @click="jcfindTree(item.code)">
        {{item.name}}
        <span>
          <van-tag round type="danger" v-if="item.show" style="float: right;">{{item.num}}</van-tag>
        </span>
        <van-divider color="#E8E8E8" style="margin:0" />
      </div>
    </div>
    <div class="industrytrees posstrees" v-if="show&&coun!==1&&!searchshow">
      <van-tree-select :items="items" :max="numer" @click-item="treeclick" :active-id.sync="activeIds"
        :main-active-index.sync="activeIndex" height="14rem" />
    </div>
    <div class="industrytrees posstrees" v-if="show&&coun===1&&!searchshow">
      <van-tree-select :items="items" @click-item="treeclick" :active-id.sync="activeIds"
        :main-active-index.sync="activeIndex" height="14rem" />
    </div>
    <van-overlay :show="show" style="top: 1.2rem;" @click="showtree" />
  </div>
</template>
<script>
import DICTIONARY from '@/api/Dictionary'
export default {
  data () {
    return {
      search: '',
      searchvalue: '', // 搜索
      searchshow: false,
      show: false,
      zwliid: 4,
      numer: 3, // 最大选中值
      resmume: [],
      items: [], // 子节点存放的数据
      list: [], // 职位列表1级菜单
      activeIds: [], // 默认选中状态ID
      counttree: [], // 已选中项
      coun: 3, // 判断职位或者简历过来的状态
      activeIndex: 0 // 默认显示的索引
    }
  },
  computed: {},
  methods: {
    jcfindZwliid (code) {
      let that = this
      // 循环一级菜单
      that.list.map(items => {
        // 循环二级菜单

        console.log(items)
        items.childVo.map((val, j) => {
          if (val.code === code) {
            that.jcfindTree(val.parentCode)
          }
        })
      })
    },
    showtree () {
      this.$nextTick(() => {
        this.show = !this.show
        this.activeIndex = 0
      })
    },
    // 职业字典获取
    jcfindTree (code) {
      let that = this
      that.show = true
      that.$nextTick(() => {
        // 循环一级菜单获取二级菜单
        for (let i = 0; i < that.list.length; i++) {
          if (code === that.list[i].code) {
            // 给items赋值二级菜单
            that.items = that.list[i].childVo
          }
        }

        // 循环每个节点赋值组件需要的字段
        that.items.map(item => {
          //   //组件需要饿字段为children，后台返回的为childVo,需要拷贝到chileren里
          item.children = item.childVo
          //   //组件需要的字段为text,后台返回为name,需要要拷贝到text里
          item.text = item.name
          item.children.map((val, i) => {
            item.children[i].text = item.children[i].name
            // 组件需要唯一的id,简历编辑赋值的时候，后台没有返回id，所以然唯一的code=id
            item.children[i].id = item.children[i].code
          })
        })
        that.parentNum()
        console.log(that.items, 'that.items')
      })

      that.$forceUpdate()
    },
    onSearch (val) {
      this.$toast(val)
    },
    // 点击取消，隐藏搜索框
    onCancel () {
      this.searchshow = !this.searchshow
      // this.$toast("取消");
    },
    // 工作经历传入
    substate (strname, array) {
      this.coun = 1
      this.counttree = []
      this.activeIds = ''

      if (array.length !== 0) {
        this.activeIds = array.join()
        this.counttree.push({
          text: strname,
          code: array[0]
        })
        this.zwliid = 1
        // this.jcfindTree(array[0]);
        this.show = true
      }
      console.log(this.counttree, 'array')
      this.parentid()
      this.$forceUpdate()
      //   console.log(2);
    },
    // 获取一级节点
    jcfindTreean () {
      let that = this
      DICTIONARY.jcfindtree().then(res => {
        console.log(res.data)
        if (res.data.code === 200) {
          // 把一级菜单赋值给list
          that.list = res.data.data
          // 添加两个属性，show表示标签是否显示，num表示数量
          that.list.map(item => {
            item.show = false
            item.num = 0
          })
        }
      })
    },
    // 赋值
    parentNum () {
      // that.counttree
      let that = this
      that.items.map((items, i) => {
        // 循环获取到的值
        let numVal = 0
        that.counttree.map(val => {
          if (val.parentCode === items.code) {
            numVal++
            if (this.zwliid === 1) {
              this.activeIndex = i
              console.log(this.activeI, '333')
            }
          } else {
          }
        })
        // 如果为0，删除样式
        if (numVal === 0) {
          delete that.items[i].badge
        } else {
          that.items[i].badge = numVal
        }
        // that.items[i].badge = numVal;
      })
      that.listitle()

      this.$forceUpdate()
    },
    listitle () {
      let that = this
      // 循环一级菜单
      that.list.map(item => {
        let numItem = 0
        // 循环二级菜单
        item.childVo.map((val, i) => {
          // 判断是否有badge属性
          if (item.childVo[i].badge) {
            // 如果有数字叠加
            numItem += item.childVo[i].badge
            item.show = true
          }
          if (numItem === 0) {
            item.show = false
          }
        })
        // 给一级菜单赋值
        item.num = numItem
      })
    },
    // 增加删除选中项
    treeclick (data) {
      let that = this
      let flag = false
      let pusflar = false
      // 判断是否存在，存在就删除
      that.counttree.map((item, i) => {
        if (item.code === data.code) {
          that.counttree.splice(i, 1)
          flag = true
        }
      })
      // 如果不存在就添加
      if (this.coun === 1) {
        // 1表示从工作经验跳转进来，初始化counttree
        that.counttree = []
        that.counttree.push(data)
      } else {
        // 判断数组长度，如果小于三就添加
        if (!flag && that.counttree.length < 3) {
          that.counttree.push(data)
          pusflar = true
        }
      }
      if (flag || pusflar) {
        console.log(333)
        this.parentNum()
        this.parentid()
      }
    },
    // 返回上一级
    back () {
      console.log(1)
      this.$emit('positionon', 2)
    },
    // 保存向父级传参
    Resume () {
      if (this.counttree.length === 0) {
        this.$toast('提交成功')
        return false
      }
      console.log(this.counttree)
      this.$emit('positionon', 1, this.counttree, this.list)
    },
    // 删除选中项
    denic (index, id) {
      if (this.coun === 1) {
        this.counttree.splice(index, 1)
        this.activeIds = ''
      } else {
        this.counttree.splice(index, 1)
        this.activeIds.splice(index, 1)
        this.parentNum()
        this.parentid()
      }
    },
    // 为选中数组赋值parentCode
    resmumeid () {
      let that = this
      // 循环三级菜单存储
      that.resmume.map(val => {
        // 循环反选数组
        that.counttree.map(item => {
          // code如果相等就赋值
          if (item.code === val.code) {
            item.parentCode = val.parentCode
            if (that.zwliid === 1) {
              that.jcfindZwliid(item.parentCode)
            }
          }
        })
      })
      this.myresmumesh()
      // console.log(that.resmume, "that.counttree");
    },
    // 一级菜单显示选中标签
    myresmumesh () {
      let that = this
      // 循环一级菜单
      that.list.map(items => {
        // 循环二级菜单
        items.childVo.map(val => {
          // 初始化
          let numVal = 0
          // 循环要显示的数组
          that.counttree.map(tree => {
            // 如果显示的parentCode等于二级菜单code，则++
            if (tree.parentCode === val.code) {
              numVal++
            }
          })
          if (numVal === 0) {
            delete val.badge
          } else {
            val.badge = numVal
          }
          // 为二级菜单赋值
        })
      })
      that.listitle()
    },
    // 编辑回显获取父id
    parentid () {
      let that = this
      // 循环一级菜单
      that.list.map(items => {
        // 循环二级菜单
        items.childVo.map((val, j) => {
          // 循环三级菜单
          items.childVo[j].childVo.map((name, h) => {
            // 把三级菜单存储在resmume数组里面
            that.resmume.push(items.childVo[j].childVo[h])
          })
        })
      })
      that.resmumeid()
      this.$forceUpdate()
    },
    // 简历编辑反选
    substateindu (str, arrid) {
      this.coun = 3
      this.counttree = []
      // 先将传过来的字符串转成数组
      let arr = str.split(',')
      // 判断类型如果是字符串就转换成数组
      if (typeof arrid === 'string') {
        arrid = JSON.parse(arrid)
      }
      // 循环并获取传过来的数据给counttree赋值
      for (let i = 0; i < arr.length; i++) {
        this.counttree.push({
          text: arr[i],
          code: arrid[i]
        })
      }
      console.log(this.counttree, arrid)
      // 默认选中项
      this.activeIds = arrid
      this.parentid()
      this.$forceUpdate()
    }
  },
  created () {
    this.jcfindTreean()
  }
}
</script>
<style scoped>
.industrytrees .van-tree-select {
  border-top: 1px solid #ebedf0;
}
</style>
